<template>
    <div class="useless-ticket" :style="{height:clientHeight+'rem'}">
        <empty v-if="realData.length == 0"></empty>
        <div class="useless-ticket-box" v-else>
            <div class="ticket-list" v-for="(item, index) in realData" :key="index">
                <div class="ticket-price">
                    <div class="price-box">
                        <span>￥</span>
                        <span>{{item.coiling_money}}</span>
                    </div>
                </div>
                <div class="ticket-des">
                    <p>{{item.full_money}}</p>
                    <p>{{item.start_time}}</p>
                    <p>{{item.end_time}}</p>
                </div>
                <div class="ticket-btn">
                    <img src="~assets/icons/no_condition.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import empty from './empty'

export default {
    name:'uselessTicket',
    data(){
        return {
            vitualData:[
                {id:1001, price:20, condition:'满199元可用', limit:'指定商品不可用', date:'2018.05.04 - 2018.05.10'},
                {id:1002, price:20, condition:'满199元可用', limit:'指定商品不可用', date:'2018.05.04 - 2018.05.10'},
                {id:1003, price:20, condition:'满199元可用', limit:'指定商品不可用', date:'2018.05.04 - 2018.05.10'},
            ],
            clientHeight:0,
            realData:[]
        }
    },
    methods:{
        getCards(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.ticketUseless, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                }
            })
        }
    },
    mounted(){
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = scale*clientHeight/100;
        this.getCards();
    },
    components:{
        empty
    }
}
</script>

<style lang='less'>
@rem:100rem;

.useless-ticket{
    width: 750/@rem;
    overflow-y: scroll;
    .useless-ticket-box{
        width: 100%;
        padding-top: 20/@rem;
        .ticket-list{
            width: 710/@rem;
            height: 200/@rem;
            background-image: url('~assets/images/ticket_bg2.png');
            background-repeat: no-repeat;
            background-size: 710/@rem 200/@rem; 
            margin: 0 auto;
            margin-bottom: 30/@rem;
            display: flex;
            color: #868686;
            position: relative;
            .ticket-price{
                display: flex;
                align-items: center;
                margin-left: 40/@rem;
                .price-box{
                    span:nth-of-type(1){
                    font-size: 40/@rem;
                    }
                    span:nth-of-type(2){
                        font-size: 70/@rem;
                    }
                }
                
            }
            .ticket-des{
                margin-left: 40/@rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: start;
                p:nth-of-type(1){
                    font-size: 36/@rem;
                }
                p:nth-of-type(2){
                    font-size: 24/@rem;
                    margin-top: 15/@rem;
                }
                p:nth-of-type(3){
                    font-size: 24/@rem;
                    margin-top: 20/@rem;
                }
            }
            .ticket-btn{
                width: 200/@rem;
                height: 200/@rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0;
                top: 0;
                color: #fd616f;
                img{
                    width: 140/@rem;
                    height: 140/@rem;
                }
            }
        }
    }
}
</style>
